<template>
  <div>
    <Button @click="open">Vertical center</Button>
    <Modal
      title="订单录入"
      v-model="modal10"
      class-name="vertical-center-modal" v-show="isClose">
        <h3>自主设计模块刺绣图片如何上传</h3>
        <p>登陆下单系统->"深度设计"->"刺绣设计"->选择刺绣位置、线号、刺绣内容录“绣花专用自”登陆下单系统->"深绣位置、线号、刺绣内->"深度设计"->"刺绣设计"->选择刺绣位置、线号、刺绣内容录“绣花专用自”</p>
        <div class="img">
          <img src="" alt="">
        </div>
        <p>预览：订单保存后从订单详情里查看</p>
        <div class="img">
          <img src="" alt="">
        </div>
      <p>登陆下单系统->"深度设计"->"刺绣设计"->选择刺绣位置、线号、刺绣内容录“绣花专用自”登陆下单系统->"深绣位置、线号、刺绣内->"深度设计"->"刺绣设计"->选择刺绣位置、线号、刺绣内容录“绣花专用自”</p>
      <div class="img">
        <img src="" alt="">
      </div>
      <p>预览：订单保存后从订单详情里查看</p>
      <div class="ivu-modal-footer btn">
        <button type="button" class="ivu-btn ivu-btn-text ivu-btn-large" @click="isClose=false">取消</button>
        <button type="button" class="ivu-btn ivu-btn-primary ivu-btn-large" @click="isClose=false">确定</button>
      </div>
    </Modal>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        modal10: false,
        isClose:true
      }
    },
    methods:{
      open(){
        this.modal10 = true;
        this.isClose=true
      }
    }
  }
</script>
<style>
  .ivu-modal-header {
    border-bottom: none;
    padding: 0;
  }
  .ivu-modal-body::-webkit-scrollbar {/*滚动条整体样式*/
    width: 3px;     /*高宽分别对应横竖滚动条的尺寸*/
    height:370px;
    margin-top: 20px;
  }
  .ivu-modal-body::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px #9ea7b4;
    background: #9ea7b4;
  }
  .ivu-modal-body::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px #e9e9e9;
    border-radius: 5px;
    background: #e9e9e9;
  }
  .ivu-modal-body{
    padding: 0;
    height:390px;
    overflow: auto;
  }
  .ivu-modal-body>h3{
    text-align: center;
    color: #464c5b;
    padding-bottom: 16px;
    font-size: 14px;
  }
  .ivu-modal-footer{
    display: none;
    border:none;
  }
  .ivu-modal-content{
    width:600px;
    height:460px;
    overflow: hidden;
    border-radius: 20px;
    padding: 0 30px 0px 20px;
    border-bottom: 20px solid #fff;
  }
  .ivu-modal-header .ivu-modal-header-inner{
    height:50px;
    line-height: 50px;
    color:#464c5b;
    font-size: 16px;
    border-bottom: 1px solid #e3e8ee;
  }
  .ivu-modal-body p{
    line-height: 24px;
    color: #46435b;
    font-size: 14px;
    text-indent: 2em;
  }
  .ivu-modal-body .img{
    width: 270px;
    height: 180px;
    margin: 20px auto;
    background: pink;
    border-radius: 20px;
  }
  .ivu-modal-body .img>img{
    width:100%;
    height:100%;
  }
  .btn{
    display: block;
  }
</style>
